import React, { useEffect, useState } from "react";
import "./toast.less";
import { Alert } from "@mui/material";
import { useDispatch, useSelector } from "react-redux";
import { Hide_Toast } from "@/store/ActionType";
let timer: NodeJS.Timeout;

type DisplayType = "block" | "none";

export default function Toast() {
  // 直接解构出来
  const { isShow, message, type } = useSelector(
    (state: IRootState) => state.toastData
  );
  const dispatch = useDispatch();
  // 但是这个时候又因为我们的显示和隐藏是基于isShow的，如果我们直接把显示的逻辑 跟isShow 挂钩，就会立刻隐藏了
  // 另外来一个状态，用这个状态表示显示和隐藏
  const [display, setDisplay] = useState<DisplayType>("none");

  // 当isSHow 每次变为true 的时候，我们就提供一个定时器，让toast组件，一会后隐藏
  useEffect(() => {
    // console.log(1);
    // 如果 isShow 已经是false，下面就不要执行了
    if (!isShow) return;
    // 为了防止多次调用 显示的 方法，出现多个定时器，我们把之前的定时器停止
    clearTimeout(timer);
    // 为了让下次点击，但是又没有消失时候再次进入，我们需要把 isShow变成 false
    // 当我们在显示期间再次点击，由于isShow已经是false，修改为true之后，就会进行 effectHook
    dispatch({
      type: Hide_Toast,
    });
    // 然后把 toast显示出来
    setDisplay("block");
    // 让isShow等等就变成false
    timer = setTimeout(() => {
      setDisplay("none");
    }, 2000);
  }, [isShow]);

  // toast的情况：
  // 成功 ， 失败 ， 警告 ， 信息提示 ---》 从外界传递过来 toast的类型;
  // 内容 ---》 message;
  // 是否显示 --》 isShow;
  // ----- toast组件，是可能在任何地方都可能使用的，上面的这些数据也是任何地方都可能使用的 --》 把上面的三个数据放到 redux 里面

  // toast展示的时间 --》 是否一定要从外面传入? 不需要
  return (
    <div className="toast" style={{ display: display }}>
      <Alert severity={type}>{message}</Alert>
    </div>
  );
}
